<template>
  <div class="baiduMap">
    <detailSection :title="'位置周边'" :more-text="'查看更多周边信息'">
      <div class="baidu" ref="mapRef"></div>
      <img src="" alt="" />
    </detailSection>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import detailSection from './detail-section.vue'

const props = defineProps({
  position: {
    type: Object,
    default: () => {
      return {
        latitude: 24.622239709105,
        longitude: 118.05169889725,
      }
    },
  },
})

const mapRef = ref()
watchEffect(() => {
  if (props.position && mapRef.value) {
    const map = new BMapGL.Map(mapRef.value)
    const point = new BMapGL.Point(props.position.longitude, props.position.latitude)
    map.centerAndZoom(point, 18)

    //创建标注对象并添加到地图
    const marker = new BMapGL.Marker(point)

    map.addOverlay(marker)
  }
})
// marker.addEventListener('click', function () {
//   alert('您点击了标注')
// })
</script>

<style lang="scss" scoped>
.baiduMap {
  padding: 10px;
}
.baidu {
  width: 100%;
  height: 300px;
}
</style>
